<template>
  <div>
    <v-app-bar app color="indigo darken-2">
      <v-avatar class="mx-12" size="40">
        <img src="../assets/logo.png" alt="" />
      </v-avatar>
      <v-container class="py-0 fill-height">
        <v-btn
          text
          color="white"
          @click="$router.push({ name: 'articleList' }).catch((err) => err)"
          >首页</v-btn
        >
        <v-btn v-for="item in cateList" :key="item.id" text color="white">{{
          item.name
        }}</v-btn>
      </v-container>
      <v-spacer></v-spacer>
      <v-responsive max-width="260" color="white">
        <v-text-field dense flat hide-details solo-inverted></v-text-field>
      </v-responsive>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: () => ({
    cateList: [],
  }),
  created() {
    this.getCateList();
  },
  methods: {
    // 获取分类
    async getCateList() {
      const { data: res } = await this.$http.get("/categories");
      this.cateList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>